<template>
  <button
    @click="play"
    class="group relative bg-gradient-to-br from-skyprimary via-blue-400 to-skyprimary-dark hover:from-skyprimary-dark hover:via-blue-500 hover:to-skyprimary active:scale-95 transition-all duration-300 text-white font-black text-base sm:text-lg rounded-2xl py-5 sm:py-6 px-4 shadow-lg hover:shadow-2xl w-full overflow-hidden border-2 border-white/50"
  >
    <!-- Shine effect -->
    <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-white to-transparent opacity-0 group-hover:opacity-30 transition-opacity duration-300"></div>

    <!-- Sparkle on hover -->
    <div class="absolute top-1 right-2 text-yellow-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-pulse">
      ✨
    </div>

    <!-- Button text -->
    <span class="relative z-10 drop-shadow-md">{{ label }}</span>

    <!-- Bottom highlight -->
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-white to-transparent opacity-40"></div>
  </button>
</template>

<script setup>
import { defineProps } from 'vue';
import { playAudio } from '../eventBus';

const props = defineProps({
  label: String,
  src: String,
});

const play = () => {
  playAudio(props.src);
};
</script>